import React, {Component} from 'react'
import './index.scss'
import {connect} from "react-redux";
import {getBmfindDetail} from "./model";
import TopBar from '../../components/topBar'

class Bmdetail extends Component {
		constructor(props) {
				super(props);
				this.state = {
						bmDetail: null,
						isMask: false
				}
		}

		render() {
				return (
						<div id="bmdetail">
								<TopBar {...this.props} left={true} right={true} leftTo="return" leftIcon="iconfont icon-back"/>
								{
										this.state.bmDetail ?
												<div className="bmdetail-content">
														<div className="title">
																<p className="t-title">{this.state.bmDetail.title}</p>
																<p className="t-subtitle">{this.state.bmDetail.subtitle}</p>
														</div>
														<div className="article">
																{
																		this.state.bmDetail.content.map((item, index) =>
																				typeof item === "string"?
																				<div className="article-item" dangerouslySetInnerHTML={{__html: item}}
																				     key={index}/>
																				     :
																						item.map(data =>
																								<div className="product-card-item" key={data.id} onClick={this.toDetail.bind(this,data.id)}>
																										<div className="img">
																												<img src={data.img} alt=""/>
																										</div>
																										{
																												data.tip_mark?
																														<span className="tip-mark">{data.tip_mark}</span>
																														:null
																										}
																										<p className="pro-title">{data.title}</p>
																										<p className="pro-subtitle">{data.subtitle}</p>
																										<div className="mark">
																												{
																														data.mark.map((item, index) =>
																																<span key={index}>{item.name}</span>
																														)
																												}
																										</div>
																										<div className="price"><span>￥{data.price}</span>起</div>
																								</div>
																						)

																		)

																}
														</div>
														<div className="share-btn" onClick={this.mask.bind(this)}>
																<p>好文分享给朋友</p>
														</div>
												</div>
												: null
								}
								{
										this.state.isMask ?
												<div className="mask" onClick={this.hideMask.bind(this)}>
														<img src="https://oi3v1wa3b.qnssl.com/common-brower-mask.png?imageslim" alt=""/>
												</div>
												: null
								}

						</div>
				)
		}

		mask() {
				this.setState({
						isMask: true
				})
		}
		hideMask() {
				this.setState({
						isMask: false
				})
		}
		toDetail(id) {
				this.props.history.push(`/detail/${id}`)
		}

		componentDidMount() {
				getBmfindDetail(this.props.match.params.id).then(res => {
						console.log(res);
						this.setState({
								bmDetail: res
						})
				});
		}

		componentWillMount() {
				this.props.hideTabBar()
		}

		componentWillUnmount() {
				this.props.showTabBar()
		}

}

export default connect(
		null,
		{
				hideTabBar() {
						return {
								type: 'hideTabBar',
								payload: false
						}
				},
				showTabBar() {
						return {
								type: 'showTabBar',
								payload: true
						}
				}
		}
)(Bmdetail)
